<template>
  <view class="app" :class="[cusClass]" :style="[{ background }, cusStyle]">
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
  import type { PropType } from 'vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { $AllColorStr } from '../mxp-tool/types/interface';
  defineOptions({
    name: 'mxp-page',
  });
  defineProps({
    /** 背景 */
    background: { type: String as PropType<$AllColorStr>, default: '#f8f8f8' },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 主体内容 */
    default: () => void;
  }>();
</script>

<style scoped>
  .app {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #f1f2f7;
  }
</style>
